<template>
  <div id="user-template" :style="'background: url(' + BgImg + ') fixed no-repeat center'">
    <UserHeader class="user-head"/>
    <NavSide class="nav-side"
             :active="index"
             :contents="['博客首页', '个人资料', '编辑博客', '新增博客', '关于']"
             :backgroundColor="'rgba(85, 88, 90, 0.9)'"
             :changeColor="'rgba(255, 103, 0, 0.9)'"
             @change="changePage"/>
    <slot></slot>
  </div>
</template>

<script>
import UserHeader from "@/components/user/template/childComponents/UserHeader";
import NavSide from "@/components/user/template/childComponents/NavSide";

import BgImg from "@/assets/background/明日方舟-春节.jpg";

export default {
  name: "UserTemplate",
  components: {
    UserHeader,
    NavSide
  },
  data() {
    return {
      BgImg,
      index: 0
    }
  },
  methods: {
    getIndex() {
      const path = this.$route.path;
      const key = path.split("/")[2];
      if(key === "info") {
        this.index = 1;
      }
      if (key === "blog") {
        this.index = 2;
      }
      if (key === "about") {
        this.index = 4;
      }
    },
    changePage(index) {
      if(index === 0) {
       this.$router.push("/blogs");
      }else if (index === 1) {
        this.$router.push("/user/info").catch(err => err);
      } else if (index === 2) {
        this.$router.push("/user/blog/edit").catch(err => err);
      } else if (index === 3) {
        this.$router.push("/user/blog/add");
      } else {
        this.$router.push("/user/about").catch(err => err);
      }
    }
  },
  created() {
    this.getIndex();
  }
}
</script>

<style scoped>
  #user-template {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #user-template .user-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  #user-template .nav-side {
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    height: 100%;
  }

</style>